<template>
  <div class="main">
    <div class="device">
      <div class="dleft">
        <span style="font-weight: 500">{{ this.deviceName }}</span>
        <!-- <img style="width: 10vw;" src="@svg/device.svg"/> -->
      </div>
      <div @click="toMain" class="dmid">
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@/assets/svg/id.svg"
          />&nbsp;ID: {{ deviceData.ID }}</span
        >
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@/assets/svg/device.svg"
          />&nbsp;在线状态: {{ deviceData.TC }}</span
        >
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@/assets/img/position.svg"
          />&nbsp;位置: {{ deviceData.BE }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
//import { Toast } from "vant";
export default {
  //name: "Lab-1",
  props: {
    id: Number,
    pub: String,
    sub: String,
    deviceInfo: Object
  },
  components: {},
  created: function () {
    console.log(this.pub);
    this.mqttMsg();
  },

  data() {
    return {
      deviceName: localStorage.getItem("deviceName"),
      gpioc: "",
      modec: "",
      setAc: "",
      isLoad: false,
      checked: false,
      show: true,
      value: 0,
      send: "",
      param: "",
      flag: true,
      num: "",
      res: {},
      deviceData: {
        ID: this.id,
        BE: "--",
        TC: "--",
        GA: "--",
      },
    };
  },
  methods: {
    updateMap(res) {
      AMap.convertFrom(res, "gps", (status, result) => {
        if (result.info === "ok") {
          this.$set(this.res, "position", result.locations[0]);
          AMap.plugin("AMap.Geocoder", () => {
            var geocoder = new AMap.Geocoder({
              // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
              radius: 1000,
              extensions: "all",
            });
            geocoder.getAddress(result.locations[0], (status, result) => {
              if (status === "complete" && result.info === "OK") {
                this.deviceData.BE = result.regeocode.formattedAddress;
                this.$set(this.res, "addr", this.deviceData.BE);
              }
            });
          });
        }
      });
    },
    toMain() {
      this.$router.push({
        name: "LYCWDW_index",
        params: {
          mqttMsg: this.res,
          deviceInfo: this.deviceInfo,
          routerType: "push",
        },
      });
    },
    mqttMsg() {
      // 接收消息处理
      this.$mqtt.message(this.pub, (topic, message) => {
        console.log(message.toString()); //控制台显示接收到的数据
        try {
          var mqttres = JSON.parse(message.toString());
          console.log(mqttres); //控制台显示接收到的数据
          if (Number(mqttres.ID) === Number(this.deviceInfo.id)) {
            console.log(mqttres); //控制台显示接收到的数据
            // this.res = mqttres
            this.$set(this.res, "sateNum", mqttres.sateNum);
            this.$set(this.res, "Altidude", mqttres.Altidude);
            this.$set(this.res, "now", true);
            this.deviceData.TC = "在线";
            this.updateMap([mqttres.lon, mqttres.lat]);
          }
        } catch (err) {
          console.log(err.message);
        }
      });
    }
  },
};
</script>
<style scoped>
.content {
  padding: 10px 16px;
}
.main {
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px 20px 10px 20px;
}
.device {
  transition: 0.3s;
  position: relative;
  z-index: 1;
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: left;
  align-items: center;
  border-radius: 20px;
  text-align: left;
  padding: 10px 10px;
  box-shadow: 0px 0px 12px 0 rgb(0 0 0 / 8%);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
}
.dleft {
  flex: 0 0 20vw;
  width: 50px;
  text-align: center;
  order: -1; /* 让 #left 居于左侧 */
}
.dmid {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  font-size: 4vw;
}
.dright {
  flex: 0 0 20vw;
  text-align: center;
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
